<template>
  <div class="app-container category-container">
      <el-table
	    v-show="true"
      default-expand-all
	     ref="categoryTree"
      v-loading="loading"
      :data="categories"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="分类名称" align="left" prop="name"  />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import * as categoryService from '@/api/service/CategoryService'

defineOptions({ name: "Category" })

const loading = ref(false)
const categories = ref<any>([])

function loadData(): void{
  loading.value = true;
  categoryService.categories().then(items=>{
      categories.value = items
    }).finally(()=>{
      loading.value = false
    })


}
loadData();
</script>

<style lang="scss" scoped>
.category-container :deep(.el-table__indent){
  padding-left: 30px!important;
}
</style>
